import React, { Component } from 'react'
import '../../App.css'
import axios from '../../utils/request'
import * as echarts from 'echarts';
import ReactEcharts from 'echarts-for-react';
import { GridComponent } from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([GridComponent, BarChart, CanvasRenderer]);

const option = {
    xAxis: {
        type: 'category',
        data: ['2015','2016', '2017', '2018', '2019', '2020', '2021']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [18,17.5, 16.5, 35, 27.3, 70, 24, 52.5],
            type: 'line',
            smooth: true,
        }
    ]
};

const option1 = {
    xAxis: {
        type: 'category',
        data: ['2015', '2016', '2017', '2018', '2019', '2020', '2021']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [17, 45, 55, 38, 10, 29, 20],
            type: 'bar',
            showBackground: true,
        }
    ]
};



export default class Topic extends Component {
    componentDidMount() {
        //调用函数
        this.getList()
    }

    state = {
        list: [],
    }

    //渲染数据
    getList() {
        axios({
            url: '/getlist',
            method: 'post'
        }).then(res => {
            this.setState({
                list: res.data.data
            })
        })
    }
    render() {
        const { list } = this.state
        return (
            <div className='topic'>
                <div className='topic_one'>
                    <div className='topice_one'>
                        <span><svg t="1635556553101" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27699" width="200" height="200"><path d="M511.0784 985.088c-260.864 0-473.088-212.224-473.088-473.088S250.2144 38.912 511.0784 38.912s473.088 212.224 473.088 473.088-212.2752 473.088-473.088 473.088z m0-894.976c-232.6016 0-421.888 189.2352-421.888 421.888s189.2352 421.888 421.888 421.888 421.888-189.2352 421.888-421.888-189.2864-421.888-421.888-421.888z" fill="#db639b" p-id="27700" data-spm-anchor-id="a313x.7781069.0.i32" className="selected"></path><path d="M768.9728 629.8624l-137.4208-84.1728c-12.032-7.3728-27.8016-3.584-35.2256 8.448-7.3728 12.032-3.584 27.8016 8.448 35.2256l125.184 76.6976v48.9472H302.7968v-48.6912l224.7168-132.8128 130.0992-75.1104c7.936-4.5568 12.8-13.0048 12.8-22.1696V285.7472c0-9.1648-4.864-17.6128-12.8-22.1696l-130.304-75.2128a25.6768 25.6768 0 0 0-25.6 0L371.3536 263.5776c-7.936 4.5568-12.8 13.0048-12.8 22.1696V436.224c0 9.1648 4.864 17.6128 12.8 22.1696l92.3648 53.3504-199.5264 117.9648c-7.7824 4.608-12.5952 13.0048-12.5952 22.016v88.8832c0 14.1312 11.4688 25.6 25.6 25.6h478.4128c14.1312 0 25.6-11.4688 25.6-25.6v-88.8832c0-8.9088-4.6592-17.2032-12.2368-21.8624zM409.7536 300.544l104.704-60.4672 104.704 60.4672v120.9344l-104.704 60.4672-104.704-60.5184V300.544z" fill="#db639b" p-id="27701" data-spm-anchor-id="a313x.7781069.0.i33" className="selected"></path></svg></span>
                        <div>
                            <span>睡眠</span>
                            <span>348</span>
                            <span>+20%增长</span>
                        </div>
                    </div>
                    <div className='topice_two'>
                        <span><svg t="1635556009823" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13236" data-spm-anchor-id="a313x.7781069.0.i11" width="200" height="200"><path d="M512 1024C229.668571 1024 0 794.331429 0 512S229.668571 0 512 0s512 229.668571 512 512-229.668571 512-512 512z m0-994.742857C245.76 29.257143 29.257143 245.76 29.257143 512s216.502857 482.742857 482.742857 482.742857 482.742857-216.502857 482.742857-482.742857S778.24 29.257143 512 29.257143z" p-id="13237" data-spm-anchor-id="a313x.7781069.0.i12" className="selected" fill="#36ab60"></path><path d="M548.571429 803.108571H282.331429c-8.777143 0-14.628571-5.851429-14.628572-14.628571V368.64c0-14.628571 8.777143-27.794286 20.48-33.645714l217.965714-109.714286c11.702857-5.851429 26.331429-5.851429 38.034286 1.462857s17.554286 19.017143 17.554286 32.182857V789.942857c1.462857 7.314286-5.851429 13.165714-13.165714 13.165714z m-251.611429-29.257142h236.982857V258.925714c0-4.388571-2.925714-7.314286-4.388571-7.314285-1.462857-1.462857-4.388571-2.925714-8.777143 0l-217.965714 109.714285c-2.925714 1.462857-4.388571 4.388571-4.388572 8.777143v403.748572z" p-id="13238" data-spm-anchor-id="a313x.7781069.0.i15" class="selected" fill="#36ab60"></path><path d="M743.131429 803.108571H557.348571c-8.777143 0-14.628571-5.851429-14.628571-14.628571V402.285714c0-10.24 5.851429-20.48 14.628571-26.331428 8.777143-5.851429 20.48-5.851429 29.257143-1.462857L741.668571 453.485714c10.24 5.851429 16.091429 16.091429 16.091429 27.794286V789.942857c0 7.314286-5.851429 13.165714-14.628571 13.165714z m-171.154286-29.257142h157.988571V479.817143l-155.062857-77.531429-1.462857 1.462857v370.102858z" p-id="13239" data-spm-anchor-id="a313x.7781069.0.i14" class="selected" fill="#36ab60"></path><path d="M784.091429 803.108571H239.908571c-8.777143 0-14.628571-5.851429-14.628571-14.628571s5.851429-14.628571 14.628571-14.628571h542.72c8.777143 0 14.628571 5.851429 14.628572 14.628571s-5.851429 14.628571-13.165714 14.628571zM380.342857 561.737143h-36.571428c-8.777143 0-14.628571-5.851429-14.628572-14.628572s5.851429-14.628571 14.628572-14.628571H380.342857c8.777143 0 14.628571 5.851429 14.628572 14.628571s-5.851429 14.628571-14.628572 14.628572zM485.668571 561.737143h-36.571428c-8.777143 0-14.628571-5.851429-14.628572-14.628572s5.851429-14.628571 14.628572-14.628571h36.571428c8.777143 0 14.628571 5.851429 14.628572 14.628571s-7.314286 14.628571-14.628572 14.628572zM485.668571 438.857143h-36.571428c-8.777143 0-14.628571-5.851429-14.628572-14.628572s5.851429-14.628571 14.628572-14.628571h36.571428c8.777143 0 14.628571 5.851429 14.628572 14.628571s-7.314286 14.628571-14.628572 14.628572zM380.342857 683.154286h-36.571428c-8.777143 0-14.628571-5.851429-14.628572-14.628572s5.851429-14.628571 14.628572-14.628571H380.342857c8.777143 0 14.628571 5.851429 14.628572 14.628571s-5.851429 14.628571-14.628572 14.628572zM485.668571 683.154286h-36.571428c-8.777143 0-14.628571-5.851429-14.628572-14.628572s5.851429-14.628571 14.628572-14.628571h36.571428c8.777143 0 14.628571 5.851429 14.628572 14.628571s-7.314286 14.628571-14.628572 14.628572zM683.154286 561.737143h-36.571429c-8.777143 0-14.628571-5.851429-14.628571-14.628572s5.851429-14.628571 14.628571-14.628571h36.571429c8.777143 0 14.628571 5.851429 14.628571 14.628571s-5.851429 14.628571-14.628571 14.628572zM683.154286 683.154286h-36.571429c-8.777143 0-14.628571-5.851429-14.628571-14.628572s5.851429-14.628571 14.628571-14.628571h36.571429c8.777143 0 14.628571 5.851429 14.628571 14.628571s-5.851429 14.628571-14.628571 14.628572z" p-id="13240" data-spm-anchor-id="a313x.7781069.0.i13" className="selected" fill="#36ab60"></path></svg></span>
                        <div>
                            <span>支出</span>
                            <span>1585</span>
                            <span>-15%减少</span>
                        </div>
                    </div>
                    <div className='topice_three'>
                        <span><svg t="1635553991714" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11143" data-spm-anchor-id="a313x.7781069.0.i4" width="200" height="200"><path d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0zM512 960c-249.6 0-448-198.4-448-448 0-249.6 198.4-448 448-448s448 198.4 448 448C960 761.6 761.6 960 512 960z" p-id="11144" data-spm-anchor-id="a313x.7781069.0.i0" class="selected" fill="#FE7433"></path><path d="M646.4 518.4C633.6 505.6 620.8 492.8 595.2 486.4 588.8 480 563.2 473.6 531.2 467.2l0-192c19.2 6.4 38.4 12.8 51.2 25.6s19.2 32 25.6 64l70.4-12.8c-6.4-44.8-25.6-76.8-51.2-102.4C601.6 230.4 569.6 217.6 531.2 211.2L531.2 179.2 492.8 179.2l0 32C448 217.6 409.6 230.4 390.4 249.6 352 281.6 339.2 320 339.2 364.8c0 25.6 6.4 51.2 19.2 70.4S384 473.6 403.2 486.4c32 19.2 57.6 25.6 83.2 32l0 217.6c-25.6 0-51.2-19.2-70.4-38.4-12.8-19.2-25.6-44.8-25.6-76.8L326.4 627.2c0 32 12.8 64 25.6 89.6S384 761.6 409.6 768s51.2 19.2 83.2 25.6l0 70.4 38.4 0 0-70.4c44.8 0 83.2-19.2 115.2-51.2s44.8-70.4 44.8-115.2c0-19.2-6.4-38.4-12.8-57.6C672 544 659.2 531.2 646.4 518.4zM492.8 454.4C460.8 448 435.2 435.2 422.4 416S403.2 384 403.2 358.4c0-25.6 6.4-44.8 25.6-57.6s38.4-25.6 64-32L492.8 454.4zM595.2 704c-19.2 19.2-38.4 32-64 32L531.2 531.2c38.4 12.8 57.6 25.6 70.4 38.4 12.8 12.8 19.2 32 19.2 57.6C620.8 659.2 614.4 684.8 595.2 704z" p-id="11145" data-spm-anchor-id="a313x.7781069.0.i3" className="" fill="#FE7433"></path></svg></span>
                        <div>
                            <span>收入</span>
                            <span>$7300</span>
                            <span>+10%增长</span>
                        </div>
                    </div>
                </div>

                <div className='topic_two'>
                    <div className='topic_two_one'>
                        <p>支出按年统计</p>
                        <div>
                            <ReactEcharts option={option} style={{ height: '300px', width: '100%' }} />
                        </div>
                    </div>
                    <div className='topic_two_two'>
                        <p>收入按年统计</p>
                        <div>
                            <ReactEcharts option={option1} style={{ height: '300px', width: '100%' }} />
                        </div>
                    </div>
                </div>

                <div className='topic_three'>
                    <p>出诊</p>
                    <table>
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>科室</th>
                                <th>名人姓名</th>
                                <th>医生姓名</th>
                                <th>时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {
                                list.length && list.map((item, index) => {
                                    return <tr key={index}>
                                        <td>{item.id}</td>
                                        <td>{item.solp}</td>
                                        <td>{item.name}</td>
                                        <td>{item.doctor}</td>
                                        <td>{item.time}</td>
                                        <td>
                                            {item.status}
                                        </td>
                                    </tr>
                                })
                            }
                        </tbody>
                    </table>
                </div>


                <div className='topic_foure'>
                    <div className='topic_two_one'>
                        <p>出诊按年统计</p>
                        <div>
                            <ReactEcharts option={option} style={{ height: '300px', width: '100%' }} />
                        </div>
                    </div>
                    <div className='topic_two_two'>
                        <p>病人按年统计</p>
                        <div>
                            <table>
                                <thead>
                                    <tr>
                                        <th>科室</th>
                                        <th>医生姓名</th>
                                        <th>情况</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {
                                        list.length && list.map((item, index) => {
                                            return <tr key={index}>
                                                <td>{item.solp}</td>
                                                <td>{item.doctor}</td>
                                                <td>
                                                    {item.status}
                                                </td>
                                            </tr>
                                        })
                                    }
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
